<template>
    <div class="events">
        <div class="goodsList_header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: backHomeStart+'EchartsList' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item disabled="true">前台管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: backHomeStart+'GoodsList' }">活动商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-divider></el-divider>
        <div class="searchArea">
            <el-input v-model="search"
                      style="width: 150px;"
                      prefix-icon="el-icon-search"
                      placeholder="请输入内容"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <el-divider></el-divider>
        <div>
            <el-row class="clear-filter">
                <el-button class="btn-right" @click="clearFilter" type="success" plain>清除所有过滤器</el-button>
            </el-row>
            <el-scrollbar class="tableScrollbar">
                <el-table
                        ref="filterTable"
                        :data="pageInfo.list"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="goodsid"
                            label="编号"
                            sortable
                            width="90%"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="plain">
                                {{scope.row.goodsid}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsname"
                            label="名称"
                            sortable
                            width="220%"
                            align="center"
                            column-key="goodsname">
                        <template slot-scope="scope">
                            <el-tag effect="plain" type="danger">
                                {{scope.row.goodsname}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsname"
                            label="图片"
                            sortable
                            width="100%"
                            align="center"
                            column-key="goodsname">
                        <template slot-scope="scope">
                            <Avatar v-if="scope.row.goodsPicturepaths[0].gpPicpath" :circle-url="startUrl+scope.row.goodsPicturepaths[0].gpPicpath" shape="square" :size="50"></Avatar>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="firstCategory.fcName"
                            label="一级分类"
                            width="110%"
                            align="center"
                            column-key="firstCategory.fcName">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="plain">
                                {{scope.row.firstCategory.fcName}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="secondCategory.scName"
                            label="二级分类"
                            width="110%"
                            align="center"
                            column-key="secondCategory.scName">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="plain">
                                {{scope.row.secondCategory.scName}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsbrand"
                            label="商品品牌"
                            align="center"
                            width="110%">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="plain">
                                {{scope.row.goodsbrand}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsprice"
                            label="商品价格"
                            sortable
                            align="center"
                            width="110%">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="plain">
                                {{scope.row.goodsprice}}￥
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsdiscount"
                            label="折扣"
                            sortable
                            align="center"
                            width="95%">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="dark">
                                {{scope.row.goodsdiscount}}折
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsstatus"
                            label="商品上架"
                            align="center"
                            width="100%">
                        <template slot-scope="scope">
                            <el-tag type="danger">
                                {{scope.row.goodsstatus == '1' ? '上架':'下架'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodslabel"
                            label="商品标签"
                            align="center"
                            width="110%"
                            :filters="filters"
                            :filter-method="filterTag"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag type="danger">
                                {{scope.row.goodslabel}}
                            </el-tag>
                        </template>

                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary" icon="el-icon-edit" circle
                                    @click="handleEdit(scope.$index, scope.row)">
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger" icon="el-icon-delete" circle
                                    @click="handleDelete(scope.$index, scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
        <GoodsDiaLog :dialog-status="dialogVisible"></GoodsDiaLog>
        <div class="footer_Area">
            <div class="pagination_right">
                <el-pagination class="pagination_border"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="pageSizes"
                               :page-size="pageSizes[0]"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="datasCount">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import GoodsDiaLog from "../../components/GoodsDiaLog";
    import Avatar from "../../components/Avatar";
    export default {
        /*活动商品*/
        name: "Events",
        data(){
            return{
                search:'',
                pageInfo : {},
                filters : [],
                pageSizes : [],
                datasCount : 400,
                currentPage : 1,
                perPageSize : 5,
                dialogVisible : false,
                startUrl:this.$store.state.beginUrl,
                label:String,
                backHomeStart:this.$store.state.backHomeHeader,
            }
        },
        created() {
            this.getDatas();
        },
        mounted() {
            // this.getDatas();
        },
        methods:{
            getPageSizes(total){
                this.pageSizes.length = 0;
                for (let i = 0; i < total / 5 ; i++) {
                    this.pageSizes.push((i+1)*5);
                }
            },
            getDatas(){
                let labelMarks = this.$store.state.labelMarks;
                this.label = labelMarks[0];
                // console.log(this.label);
                let formData = new FormData();
                formData.append('label',this.label);
                this.$axios.post('/goods/queryByLabel/'+this.currentPage+"/"+this.perPageSize,formData).then(result=>{
                    this.pageInfo=result.data;
                    // console.log(this.pageInfo);
                    let goodsList = this.pageInfo.list;
                    this.dialogVisible=false;
                    /*标签去重*/
                    this.clearRepeatLabel(goodsList);
                    this.datasCount=this.pageInfo.total;
                    this.getPageSizes(this.datasCount);
                }).catch();
            },
            deleteById(id){
                this.$axios.get("/goods/remove/"+id).then(result=>{
                    this.addResult(result.data);
                    this.getDatas();
                }).catch(err=>{
                    alert(err);
                })
            },
            clearRepeatLabel(goodsList){
                for (let i = 0; i < goodsList.length; i++) {
                    if (goodsList[i].goodslabel != '' && goodsList[i].goodslabel != null){
                        let checksame = false;
                        if (this.filters.length>0){
                            for (let j = 0; j <this.filters.length; j++) {
                                if (goodsList[i].goodslabel==this.filters[j].value){
                                    checksame = true;
                                    break;
                                }
                            }
                        }
                        if (checksame==false){
                            this.filters.push({ text: goodsList[i].goodslabel, value: goodsList[i].goodslabel});
                        }
                    }
                }
            },
            hiddenDialog(){
                this.dialogVisible = false;
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.goodslabel === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            handleEdit(index, row) {
                // console.log(index, row);
                this.$store.commit("getModifyData",row);
                /*弹窗*/
                this.dialogVisible = true;
            },
            handleDelete(index, row) {
                // console.log(index, row.goodsid);
                this.deleteById(row.goodsid);
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.perPageSize = val;
                this.getDatas();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getDatas();
            },
            addResult(val) {
                this.$message({
                    showClose: true,
                    message: val===true?'恭喜你，删除成功！':'错了哦，删除失败！',
                    type: val===true?'success':'error'
                });
            },

            gotoAddGoods(){
                this.$router.push('/BackHome/AddGoods');
            }
        },
        computed:{

        },
        components:{
            GoodsDiaLog,
            Avatar
        }
    }
</script>

<style scoped>
    .footer_Area{
        height: 40px;
        width: 100%;
        /*border: 1px #9162ff solid;*/
        /*outline: 1px solid red;*/
        padding: 10px;
    }
    .pagination_right{
        height: 40px;
        width: 55%;
        /*border: 1px #9162ff solid;*/
        float: right;
        /*outline: 1px solid red;*/
    }
    .pagination_border{
        width: 550px;
        /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)*/
    }
    .searchArea{
        text-align: left;
    }
    .block{
        height: 50px;
        width: 100%;
        /*border: 1px #9162ff solid;*/
        padding: 20px;
    }
    .container{
        /*border: 1px #89ffa5 solid;*/
    }
    .clear-filter{
        padding: 0;
        height: 40px;
    }
    .btn-left{
        float: left;
        margin-left: 8px;
    }
    .borderLine{
        border: 1px #ff6341 solid;
    }
    .el-table-column{
        /*text-align: center;*/
    }
    .el-tag{
        font-size: 12px;
    }
    .el-table{
        /*border: 1px #ff6341 solid;*/
        align-content: center;


    }
    .btn-right{
        /*border: 1px red solid;*/
        float: right;
        margin-right: 8px;
    }
    .tableScrollbar{
        height: 63vh;
        /*border: 1px #ff6341 solid;*/
    }
</style>